<template>
  <div>
      <Table :data="list" :columns="columns" border>
          <template slot-scope="{row}" slot="action">
            <img :src="row.pic" alt="">
          </template>
      </Table>
  </div>
</template>

<script>
export default {
    name:'customColumn',
    data(){
        return {
            columns:[
                {
                    title:'编号',
                    key:'id'
                },
                {
                    title:'书名',
                    key:'bookname' 
                },
                  {
                    title:'作者',
                    key:'author' 
                },
                 {
                    title:'出版社',
                    key:'publisher' 
                },
                 {
                    title:'图片',
                    slot:'action'
                },
            ],
            list:[
                {
                    author:'刘慈欣',
                    bookname:'三体',
                    id:1,
                    publisher:'宇宙文明出版社',
                    pic:'https://img1.baidu.com/it/u=3902268224,771648513&fm=26&fmt=auto'
                },
                {
                    author:'布兰登艾草',
                    bookname:'黑洞',
                    id:1,
                    publisher:'银河文明出版社',
                    pic:'https://img0.baidu.com/it/u=1849672315,3321188901&fm=26&fmt=auto'
                },
                {
                    author:'马克·扎克伯格',
                    bookname:'元宇宙',
                    id:1,
                    publisher:'虚拟世界文明',
                    pic:'https://img0.baidu.com/it/u=853712120,2925766148&fm=253&fmt=auto&app=138&f=JPEG?w=669&h=347'
                }
            ]
        }
    }
}
</script>

<style scoped >

    img{
        width: 260px;
        height: 140px;
    }
</style>